<template>
  <status-bar />
  <view class="mail-page">
    <bg-set background="linear-gradient(#c7e5ff,#f1f6fc)" />
    <view class="mail-page__main">
      <uni-segmented-control
        :current="current"
        :values="items"
        @clickItem="onClickItem"
        styleType="text"
        activeColor="#4cd964"
      ></uni-segmented-control>
      <view class="content">
        <view v-show="current === 0">
          <view class="card-wrap">
            <view class="card1">
              <view
                class="mail f ai-c jc-sb"
                @click="clickToAddressSelectPage(1)"
              >
                <image
                  src="/static/image/mail/mail.png"
                  mode="widthFix"
                  style="width: 60rpx"
                ></image>
                <view v-if="selectObj_mail.subUserName" class="f f1 ai-c jc-sb">
                  <view class="f f1 fd-col">
                    <view
                      ><text class="fw-600">{{
                        selectObj_mail.subUserName
                      }}</text
                      ><text style="margin-left: 20rpx" class="fw-600">{{
                        selectObj_mail.subUserPhone
                      }}</text></view
                    >
                    <view class="f w100p"
                      ><text class="address f f1 w0 to-1">{{
                        selectObj_mail.subUserAddress
                      }}</text></view
                    >
                  </view>
                  <uni-icons type="arrowright" size="20"></uni-icons>
                </view>
                <view
                  v-else
                  class="f f1 ai-c jc-sb h100p"
                  style="border-bottom: 2px solid #eee"
                  ><text>从哪里寄出</text
                  ><view class="f ai-c"
                    ><text>请选择</text
                    ><uni-icons type="arrowright" size="20"></uni-icons></view
                ></view>
              </view>
              <view
                class="pick-up f ai-c jc-sb"
                @click="clickToAddressSelectPage(0)"
              >
                <image
                  src="/static/image/mail/pick-up.png"
                  mode="widthFix"
                  style="width: 60rpx"
                ></image>
                <view
                  v-if="selectObj_pickUp.subUserName"
                  class="f f1 ai-c jc-sb"
                >
                  <view class="f f1 fd-col"
                    ><view
                      ><text class="fw-600">{{
                        selectObj_pickUp.subUserName
                      }}</text
                      ><text style="margin-left: 20rpx" class="fw-600">{{
                        selectObj_pickUp.subUserPhone
                      }}</text></view
                    >
                    <view class="f w100p"
                      ><text class="address f f1 w0 to-1">{{
                        selectObj_pickUp.subUserAddress
                      }}</text></view
                    ></view
                  >
                  <uni-icons type="arrowright" size="20"></uni-icons>
                </view>
                <view v-else class="f f1 ai-c jc-sb h100p"
                  ><text>要寄到哪里</text
                  ><view class="f ai-c"
                    ><text>请选择</text
                    ><uni-icons type="arrowright" size="20"></uni-icons></view
                ></view>
              </view>
              <view class="mail-mode f jc-sb ai-c">
                <text>寄件方式</text>
                <uni-data-checkbox
                  v-model="radioValue"
                  :localdata="radioRange"
                  @change="radioChange"
                  mode="tag"
                ></uni-data-checkbox>
              </view>
              <view class="visit-time f jc-sb ai-c">
                <template v-if="radioValue === 0">
                  <text>上门时间</text>
                  <view @click="selectVisitTime" class="f ai-c"
                    ><text v-if="selectTime">预约 {{ selectTime }}</text
                    ><text v-else>请选择上门时间</text
                    ><uni-icons type="arrowright" size="20"></uni-icons
                  ></view>
                </template>
                <template v-else>
                  <text>服务点自寄</text>
                  <view @click="selectStage" class="f ai-c"
                    ><text v-if="selectStageStr">{{ selectStageStr }}</text>
                    <text v-else>请选择服务点</text
                    ><uni-icons type="arrowright" size="20"></uni-icons
                  ></view>
                </template>
              </view>
            </view>
            <view class="card2">
              <view class="goods-info f jc-sb ai-c">
                <text>物品信息</text>
                <view @click="selectGoodsInformation"
                  ><text v-if="selectGoodsInformationStr" class="fw-600">{{
                    selectGoodsInformationStr
                  }}</text
                  ><text v-else class="fw-600">请选择物品信息</text
                  ><uni-icons type="arrowright" size="20"></uni-icons
                ></view>
              </view>
              <view class="lm-app-rights f fd-col">
                <view class="header"><text>物流管理APP平台权益</text></view>
                <view class="body f">
                  <view class="visit-rights rights f fd-col ai-c jc-c"
                    ><image
                      src="/static/image/mail/visit-rights.png"
                      mode="widthFix"
                      style="width: 54rpx"
                    ></image
                    ><text style="font-size: 20rpx">极速上门</text
                    ><view class="give"
                      ><text style="font-size: 18rpx">赠送</text></view
                    ></view
                  >
                  <view class="compensate-rights rights f fd-col ai-c jc-c"
                    ><image
                      src="/static/image/mail/compensate-rights.png"
                      mode="widthFix"
                      style="width: 46rpx"
                    ></image
                    ><text style="font-size: 20rpx; margin-top: 10rpx"
                      >丢损必赔</text
                    ><view class="give"
                      ><text style="font-size: 18rpx">赠送</text></view
                    ></view
                  >
                  <view class="secret-protect-rights rights f fd-col ai-c jc-c"
                    ><image
                      src="/static/image/mail/secret-protect-rights.png"
                      mode="widthFix"
                      style="width: 46rpx"
                    ></image
                    ><text style="font-size: 20rpx; margin-top: 10rpx"
                      >隐私保护</text
                    ><view class="give"
                      ><text style="font-size: 18rpx">赠送</text></view
                    ></view
                  >
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-show="current === 1">
          <view class="card-wrap">
            <view class="card1">
              <view
                class="mail f ai-c jc-sb"
                @click="clickToAddressSelectPage(1)"
              >
                <image
                  src="/static/image/mail/mail.png"
                  mode="widthFix"
                  style="width: 60rpx"
                ></image>
                <view v-if="selectObj_mail.subUserName" class="f f1 ai-c jc-sb">
                  <view class="f f1 fd-col">
                    <view
                      ><text class="fw-600">{{
                        selectObj_mail.subUserName
                      }}</text
                      ><text style="margin-left: 20rpx" class="fw-600">{{
                        selectObj_mail.subUserPhone
                      }}</text></view
                    >
                    <view class="f w100p"
                      ><text class="address f f1 w0 to-1">{{
                        selectObj_mail.subUserAddress
                      }}</text></view
                    >
                  </view>
                  <uni-icons type="arrowright" size="20"></uni-icons>
                </view>
                <view
                  v-else
                  class="f f1 ai-c jc-sb h100p"
                  style="border-bottom: 2px solid #eee"
                  ><text>从哪里寄出</text
                  ><view class="f ai-c"
                    ><text>请选择</text
                    ><uni-icons type="arrowright" size="20"></uni-icons></view
                ></view>
              </view>
              <view
                class="pick-up f ai-c jc-sb"
                @click="clickToEditEnterpriseInfo"
              >
                <image
                  src="/static/image/mail/goods_rejected.png"
                  mode="widthFix"
                  style="width: 46rpx"
                ></image>
                <view
                  v-if="selectObj_goodsReject.subUserName"
                  class="f f1 ai-c jc-sb ml10"
                >
                  <view class="f f1 fd-col"
                    ><view
                      ><text class="fw-600">{{
                        selectObj_goodsReject.subUserName
                      }}</text
                      ><text style="margin-left: 20rpx" class="fw-600">{{
                        selectObj_goodsReject.subUserPhone
                      }}</text></view
                    >
                    <view class="f w100p"
                      ><text class="address f f1 w0 to-1">{{
                        selectObj_goodsReject.subUserAddress
                      }}</text></view
                    ></view
                  >
                  <uni-icons type="arrowright" size="20"></uni-icons>
                </view>
                <view v-else class="f f1 ai-c jc-sb h100p ml10"
                  ><text>请填写商家退换地址</text
                  ><view class="f ai-c"
                    ><text>请填写</text
                    ><uni-icons type="arrowright" size="20"></uni-icons></view
                ></view>
              </view>
              <view class="mail-mode f jc-sb ai-c">
                <text>寄件方式</text>
                <uni-data-checkbox
                  v-model="radioValue"
                  :localdata="radioRange"
                  @change="radioChange"
                  mode="tag"
                ></uni-data-checkbox>
              </view>
              <view class="visit-time f jc-sb ai-c">
                <template v-if="radioValue === 0">
                  <text>上门时间</text>
                  <view @click="selectVisitTime" class="f ai-c"
                    ><text v-if="selectTime">预约 {{ selectTime }}</text
                    ><text v-else>请选择上门时间</text
                    ><uni-icons type="arrowright" size="20"></uni-icons
                  ></view>
                </template>
                <template v-else>
                  <text>服务点自寄</text>
                  <view @click="selectStage" class="f ai-c"
                    ><text v-if="selectStageStr">{{ selectStageStr }}</text>
                    <text v-else>请选择服务点</text
                    ><uni-icons type="arrowright" size="20"></uni-icons
                  ></view>
                </template>
              </view>
            </view>
            <view class="card2">
              <view class="goods-info f jc-sb ai-c">
                <text>物品信息</text>
                <view @click="selectGoodsInformation"
                  ><text v-if="selectGoodsInformationStr" class="fw-600">{{
                    selectGoodsInformationStr
                  }}</text
                  ><text v-else class="fw-600">请选择物品信息</text
                  ><uni-icons type="arrowright" size="20"></uni-icons
                ></view>
              </view>
              <view class="lm-app-rights f fd-col">
                <view class="header"><text>物流管理APP平台权益</text></view>
                <view class="body f">
                  <view class="visit-rights rights f fd-col ai-c jc-c"
                    ><image
                      src="/static/image/mail/visit-rights.png"
                      mode="widthFix"
                      style="width: 54rpx"
                    ></image
                    ><text style="font-size: 20rpx">极速上门</text
                    ><view class="give"
                      ><text style="font-size: 18rpx">赠送</text></view
                    ></view
                  >
                  <view class="compensate-rights rights f fd-col ai-c jc-c"
                    ><image
                      src="/static/image/mail/compensate-rights.png"
                      mode="widthFix"
                      style="width: 46rpx"
                    ></image
                    ><text style="font-size: 20rpx; margin-top: 10rpx"
                      >丢损必赔</text
                    ><view class="give"
                      ><text style="font-size: 18rpx">赠送</text></view
                    ></view
                  >
                  <view class="secret-protect-rights rights f fd-col ai-c jc-c"
                    ><image
                      src="/static/image/mail/secret-protect-rights.png"
                      mode="widthFix"
                      style="width: 46rpx"
                    ></image
                    ><text style="font-size: 20rpx; margin-top: 10rpx"
                      >隐私保护</text
                    ><view class="give"
                      ><text style="font-size: 18rpx">赠送</text></view
                    ></view
                  >
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="mail-page__footer f jc-sb ai-c">
      <template v-if="current === 0">
        <view class="text f fd-col ai-fs">
          <text>填写收寄地址后看预估运费</text>
          <text style="font-size: 20rpx; color: #999">按1公斤内物品预估</text>
        </view>
        <view class="button"
          ><van-button
            round
            type="primary"
            :disabled="isDisabled0"
            @click="placeOrder"
            >立即下单</van-button
          ></view
        >
      </template>
      <template v-else>
        <view class="text f fd-col ai-fs">
          <text>填写收寄地址后看预估运费</text>
          <text style="font-size: 20rpx; color: #999">按1公斤内物品预估</text>
        </view>
        <view class="button"
          ><van-button
            round
            type="primary"
            :disabled="isDisabled1"
            @click="placeOrder"
            >立即下单</van-button
          ></view
        >
      </template>
    </view>
    <select-visit-time-popup
      ref="selectVisitTimePopup"
      @getSelectVisitTime="getSelectVisitTime"
    />
    <select-stage-popup
      ref="selectStagePopup"
      @getSelectStage="getSelectStage"
    />
    <select-goods-information-popup
      ref="selectGoodsInformationPopup"
      @getSelectGoodsInformation="getSelectGoodsInformation"
    />
    <warn-popup ref="warnPopup" :price="price" />
  </view>
</template>

<script>
import { ref, computed } from "vue";
import { useStore } from "vuex";
import mailAPI from "/api/modules/mail";
import SelectVisitTimePopup from "./components/select-visit-time-popup.vue";
import SelectStagePopup from "./components/select-stage-popup.vue";
import SelectGoodsInformationPopup from "./components/select-goods-information-popup.vue";
import WarnPopup from "./components/warn-popup.vue";
export default {
  name: "mail-page",
  components: {
    SelectVisitTimePopup,
    SelectStagePopup,
    SelectGoodsInformationPopup,
    WarnPopup,
  },
  setup() {
    const current = ref(0);
    const items = ref(["寄件", "退货"]);
    const radioValue = ref(0);
    const radioRange = ref([
      { value: 0, text: "上门取件" },
      { value: 1, text: "服务点自寄" },
    ]);
    const store = useStore();
    const selectObj_mail = computed(() => store.getters.getSelectObj_mail);
    const selectObj_pickUp = computed(() => store.getters.getSelectObj_pickUp);
    const selectObj_goodsReject = computed(
      () => store.getters.getSelectObj_goodsReject
    );
    const onClickItem = ({ currentIndex }) => {
      current.value = currentIndex;
    };
    const clickToAddressSelectPage = (mode) => {
      let mailIndex, pickUpIndex;
      if (selectObj_mail.value.index + 1 && mode === 1) {
        mailIndex = selectObj_mail.value.index;
        uni.navigateTo({
          url: `/pages/mail/address-select?mode=${mode}&index=${mailIndex}`,
        });
        return;
      } else if (selectObj_pickUp.value.index + 1 && mode === 0) {
        pickUpIndex = selectObj_pickUp.value.index;
        uni.navigateTo({
          url: `/pages/mail/address-select?mode=${mode}&index=${pickUpIndex}`,
        });
        return;
      }
      uni.navigateTo({
        url: `/pages/mail/address-select?mode=${mode}`,
      });
    };
    const clickToEditEnterpriseInfo = () => {
      uni.navigateTo({
        url: "/pages/mail/edit-enterprise-info",
      });
    };
    const radioChange = (data) => {
      radioValue.value = data.detail.value;
    };
    // select-visit-time-popup
    const selectVisitTimePopup = ref(null);
    const selectTime = ref("");
    const selectVisitTime = () => {
      selectVisitTimePopup.value.openPopup();
    };
    const getSelectVisitTime = (value) => {
      selectTime.value = value;
    };
    // select-stage-popup
    const selectStagePopup = ref(null);
    const selectStageStr = ref("");
    const selectStage = () => {
      selectStagePopup.value.openPopup();
    };
    const getSelectStage = (value) => {
      selectStageStr.value = value;
    };
    // select-goods-information-popup
    const selectGoodsInformationPopup = ref(null);
    const selectGoodsInformationStr = ref("");
    const goodsWeight = ref(0);
    const selectGoodsInformation = () => {
      selectGoodsInformationPopup.value.openPopup();
    };
    const getSelectGoodsInformation = (value, weight) => {
      selectGoodsInformationStr.value = value;
      goodsWeight.value = weight;
    };
    // 提交逻辑
    const isDisabled0 = computed(
      () =>
        !selectObj_mail.value.subUserName ||
        !selectObj_pickUp.value.subUserName ||
        !selectGoodsInformationStr.value ||
        (selectTime.value === "" && selectStageStr.value === "")
    );
    const isDisabled1 = computed(
      () =>
        !selectObj_mail.value.subUserName ||
        !selectObj_goodsReject.value.subUserName ||
        !selectGoodsInformationStr.value ||
        (selectTime.value === "" && selectStageStr.value === "")
    );
    const price = ref(0);
    const warnPopup = ref(null);
    const placeOrder = async () => {
      const data = await mailAPI.getPrice();
      price.value =
        radioValue.value === 0
          ? goodsWeight.value * data[0].unitPrice + data[0].visitPrice
          : goodsWeight.value * data[0].unitPrice;
      if (current.value === 0) {
        // 存取mail的剩余信息
        store.commit("setMailOtherInfo", {
          reason: 0,
          mode: radioValue.value,
          visitTime: selectTime.value,
          stageName: selectStageStr.value,
          goodsInformation: selectGoodsInformationStr.value,
        });
        store.commit("setGoodsRejectedOtherInfo", {});
      } else {
        store.commit("setMailOtherInfo", {});
        store.commit("setGoodsRejectedOtherInfo", {
          reason: 1,
          mode: radioValue.value,
          visitTime: selectTime.value,
          stageName: selectStageStr.value,
          goodsInformation: selectGoodsInformationStr.value,
        });
      }
      warnPopup.value.open();
    };
    return {
      current,
      items,
      radioValue,
      radioRange,
      selectObj_mail,
      selectObj_pickUp,
      selectObj_goodsReject,
      onClickItem,
      clickToAddressSelectPage,
      clickToEditEnterpriseInfo,
      radioChange,
      selectVisitTimePopup,
      selectTime,
      selectVisitTime,
      getSelectVisitTime,
      selectStagePopup,
      selectStageStr,
      selectStage,
      getSelectStage,
      selectGoodsInformationPopup,
      selectGoodsInformationStr,
      selectGoodsInformation,
      getSelectGoodsInformation,
      isDisabled0,
      isDisabled1,
      price,
      warnPopup,
      placeOrder,
    };
  },
};
</script>
<style lang='scss' scoped>
.mail-page {
  position: fixed;
  width: 100%;
  height: calc(100vh - 90rpx);
  &__main {
    box-sizing: border-box;
    .content {
      .card-wrap {
        margin: 20rpx auto;
        padding: 20rpx;
        width: 94%;
        height: 1200rpx;
        box-sizing: border-box;
        border-radius: 20rpx;
        .card1 {
          padding: 20rpx;
          width: 100%;
          height: 500rpx;
          box-sizing: border-box;
          box-shadow: 2px 2px 4px #ddd;
          border-radius: 20rpx;
          background-color: #fff;
          .mail {
            width: 100%;
            height: 100rpx;
          }
          .pick-up {
            margin-top: 20rpx;
            width: 100%;
            height: 100rpx;
            border-radius: 20rpx;
            background-color: #f5f5fd;
          }
          .mail-mode {
            margin-top: 20rpx;
            width: 100%;
            height: 100rpx;
            ::v-deep .checklist-group {
              justify-content: flex-end;
              .uni-label-pointer {
                border-radius: 20rpx;
                &:last-child {
                  margin-right: 0;
                }
              }
            }
          }
          .visit-time {
            margin-top: 10rpx;
            width: 100%;
            height: 100rpx;
          }
          .address {
            font-size: 20rpx;
            > ::v-deep span {
              flex: 1;
              width: 0;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              color: #666;
            }
          }
        }
        .card2 {
          margin-top: 30rpx;
          padding: 20rpx;
          width: 100%;
          height: 500rpx;
          border-radius: 20rpx;
          box-sizing: border-box;
          box-shadow: 2px 2px 4px #ddd;
          background-color: #fff;
          .goods-info {
            width: 100%;
            height: 100rpx;
          }
          .lm-app-rights {
            width: 100%;
            margin-top: 20px;
            .body {
              margin-top: 20rpx;
              .rights {
                position: relative;
                width: 160rpx;
                height: 160rpx;
                border-radius: 20rpx;
                border: 1px solid #eee;
              }
              .compensate-rights {
                margin: 0 20rpx;
              }
              .give {
                display: table-cell;
                position: absolute;
                right: 0;
                top: 0;
                width: 60rpx;
                background: #006df9;
                border-radius: 0 20rpx 0 0;
                text-align: center;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }
  &__footer {
    position: absolute;
    bottom: 0rpx;
    left: 0;
    padding: 20rpx 40rpx;
    width: 100%;
    height: 140rpx;
    box-sizing: border-box;
    background-color: #fff;
  }
}
</style>